﻿@model NavigatorBarModel
@{
    Layout = "_Default";
}
@section css
{
    <style>
        .panel-count {
            margin: 2px 10px;
            height: 114px;
            background-color: #fff;
            border: none;
            border-radius: 5px;
            position: relative;
            box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);
        }

        .panel-count-sx {
            margin: 2px 10px;
            height: 400px;
            background-color: #fff;
            border: none;
            border-radius: 5px;
            position: relative;
            box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);
        }

        .panel-ls {
            padding: 0px;
        }

        .row {
            margin-left: 0px;
            margin-right: 0px;
        }

        .panel-count-ls {
            width: 48%;
            height: 100%;
            display: inline-block;
        }

        .description {
            display: inline-block;
            font-size: 18px;
            position: absolute;
            top: 30px;
            left: 150px;
            font-family: 微软雅黑;
        }

        .panel-icon {
            width: 130px;
            height: 100%;
            font-size: 70px;
            text-align: center;
            color: #dddddd;
            position: absolute;
            top: 20px;
            right: 10px;
        }

        .panel-chartNum {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .panel-chart {
            width: 114px;
            height: 114px;
            display: inline-block;
        }

        .panel > .panel-heading {
            color: #666;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .panel-footer, .panel-heading {
            border-bottom: 1px solid rgba(0,0,0,.12);
            height: 44px;
            font-size: 16px;
            padding: 14px 22px;
        }

        .feed-message, .panel-footer, .panel-heading {
            box-shadow: 0 1px 0 0 rgba(255,255,255,.12);
        }

        .panel-title {
            font-weight: 400;
            opacity: .9;
        }

        .more-text-widget .upper-text, .panel-title, h1.al-title {
            text-transform: uppercase;
        }

        .panel-title {
            margin-top: 0;
            font-size: 16px;
        }

        .channels-info {
            display: inline-block;
            width: calc(100% - 360px);
            display: inline-block;
            padding: 10px;
            position: relative;
            top: -50px;
            left: -3px;
        }

        .legend-color {
            width: 30px;
            height: 30px;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,.25);
            position: relative;
            top: 27px;
            border-radius: 15px;
            left: -45px;
        }

        .channels-info-item p {
            margin-bottom: 9px;
            font-size: 18px;
            opacity: .9;
        }

        p {
            margin-bottom: 12px;
            font-size: 14px;
        }

        .channel-progress {
            height: 4px;
            border-radius: 0;
            width: 100%;
            margin-bottom: 0;
            background-color: rgba(0,0,0,.07);
            box-shadow: none;
        }

        .progress {
            background: rgba(0,0,0,.07);
        }

        .channels-info-item .channel-number {
            display: inline-block;
            float: right;
        }

        .Chart-Order {
            width: 350px;
            height: 350px;
            display: inline-block;
        }

        ul.todo-list {
            margin: 0;
            padding: 0;
        }

        ol, ul {
            margin-bottom: 10px;
        }

        dl, ol, ul {
            margin-top: 0;
        }

            ul.todo-list li {
                margin: 0 0 -1px;
                padding: 12px;
                list-style: none;
                position: relative;
                border: 1px solid #cbcbcb;
                cursor: -webkit-grab;
                cursor: grab;
                height: 42px;
            }

                ul.todo-list li i.mark {
                    display: block;
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    height: 42px;
                    min-width: 4px;
                    background: #cbcbcb;
                    cursor: pointer;
                    -webkit-transition: min-width .3s ease-out;
                    transition: min-width .3s ease-out;
                    background-color: #0e8174;
                }

        .mark, mark {
            padding: .2em;
            background-color: #fcf8e3;
        }

        label.todo-checkbox {
            width: 100%;
            padding-right: 25px;
            min-height: 16px;
            cursor: pointer;
        }

        label.custom-checkbox, label.custom-radio {
            padding-right: 0;
            padding-left: 0;
            margin-bottom: 0;
            padding-left: 5px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
        }

        dt, kbd kbd, label {
            font-weight: 700;
        }

        ul.todo-list li i.remove-todo {
            position: absolute;
            cursor: pointer;
            top: 0;
            right: 12px;
            font-size: 32px;
            -webkit-transition: color .2s;
            transition: color .2s;
            color: rgba(203,203,203,.5);
            visibility: hidden;
            line-height: 42px;
        }

        .order-lable {
            position: absolute;
            top: 0px;
            left: 0px;
            display: table
        }

        .lable-Count {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 18px;
            font-family: 微软雅黑;
        }

        .task-todo-container {
            margin: 8px 13px;
            overflow-y: auto;
            height: 330px;
        }

        .ng-time {
            float: right;
            font-size: 12px;
        }

        .row-bottom {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .span-text {
            font-weight: bold
        }

        .chartNum-text {
            position: absolute;
            top: 0px;
            left: 0px;
            display: table;
            width: 114px;
            height: 114px;
        }

        @@media screen and (min-width: 1200px) and (max-width: 1580px) {
            .panel-icon {
                display: none;
            }
        }

        @@media screen and (min-width: 1580px) and (max-width: 1700px) {
            .description {
                left: 120px;
            }
        }
        /* 小屏幕 */
        @@media all and (max-width: 1200px) {
        }

        /* 平板 */
        @@media all and (max-width: 1024px) {
        }

        /* 手机 */
        @@media all and (max-width: 768px) {
            .description {
                left: 120px;
            }

            .channels-info {
                display: none;
            }

            .Chart-Order {
                width: 100%;
            }

            .ng-time {
                display: none;
            }
        }

        /* 超小屏幕（苹果SE） */
        @@media all and (max-width: 340px) {
            .panel-icon {
                display: none;
            }
        }
    </style>
}
@section javascript {
    <script src="~/node_modules/echarts/dist/echarts.min.js"></script>
    <script src="~/js/westeros.js"></script>
    <script>
        var mainCharts1 = echarts.init(document.getElementById('main-charts1'), "westeros");
        var mainCharts2 = echarts.init(document.getElementById('main-charts2'), "westeros");
        var mainCharts3 = echarts.init(document.getElementById('main-charts3'), "westeros");
        var mainCharts4 = echarts.init(document.getElementById('main-charts4'), "westeros");
        var ChartCenter = echarts.init(document.getElementById('chart-center'), "westeros");
        var ChartBottom = echarts.init(document.getElementById('chart-bottom'), "westeros");

        function mainChart(index, data) {
            optionData1 = {
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        hoverAnimation: false,
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        data: [
                            { value: 2, name: "" },
                            { value: 10, name: "" }
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    //自定义颜色
                                    var colorList = [
                                        '#fff', '#e0e0e0',
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            };
            switch (index) {
                case 1:
                    mainCharts1.setOption(optionData1);
                    break;
                case 2:
                    mainCharts2.setOption(optionData1);
                    break;
                case 3:
                    mainCharts3.setOption(optionData1);
                    break;
                case 4:
                    mainCharts4.setOption(optionData1);
                    break;
            }
        }

        mainChart(1);
        mainChart(2);
        mainChart(3);
        mainChart(4);

        optionData2 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br />{b}: {c} ({d}%)"
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    hoverAnimation: false,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                    ], itemStyle: {
                        normal: {
                            color: function (params) {
                                //自定义颜色
                                var colorList = [
                                    '#10c4b5', '#005562', '#0e8174', '#6eba8c'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };

        optionData3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['RGV库', '穿梭车库', '重载库']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'RGV库',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '穿梭车库',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '重载库',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410]
                }

            ]
        };

        ChartCenter.setOption(optionData2);
        ChartBottom.setOption(optionData3);

        $("#chart-bottom").resize(function () {
            ChartBottom.resize();
        });

        $(window).resize(function () {
            ChartCenter.resize();
        });
    </script>
}
<div class="content-header">
</div>
<div class="row">
    <div class="col-xl-3 panel-ls">
        <div class="panel-count">
            <i class="fa fa-map panel-icon"></i>
            <div class="panel-chart">
                <div class="panel-chart " id="main-charts1"></div>
                <div class="chartNum-text">
                    <span class="panel-chartNum">10%</span>
                </div>
            </div>
            <div class="description">
                <div class="ng-binding">
                    <font>待执行订单</font>
                </div>
                <div class="description-stats ng-binding">
                    <font><span class="span-text">10</span>单</font>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 panel-ls">
        <div class="panel-count">
            <i class="fa fa-paper-plane panel-icon"></i>
            <div class="panel-chart">
                <div class="panel-chart" id="main-charts2"></div>
                <div class="chartNum-text">
                    <span class="panel-chartNum">30%</span>
                </div>
            </div>
            <div class="description">
                <div class="ng-binding">
                    <font>待处理异常</font>
                </div>
                <div class="description-stats ng-binding">
                    <font><span class="span-text">3</span>个</font>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 panel-ls">
        <div class="panel-count">
            <i class="fa fa-tags panel-icon"></i>
            <div class="panel-chart">
                <div class="panel-chart" id="main-charts3"></div>
                <div class="chartNum-text">
                    <span class="panel-chartNum">40%</span>
                </div>
            </div>
            <div class="description">
                <div class="ng-binding">
                    <font>今日已完成</font>
                </div>
                <div class="description-stats ng-binding">
                    <font><span class="span-text">200</span>单</font>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 panel-ls">
        <div class="panel-count">
            <i class="fa fa-user-circle panel-icon"></i>
            <div class="panel-chart">
                <div class="panel-chart" id="main-charts4"></div>
                <div class="chartNum-text">
                    <span class="panel-chartNum">50%</span>
                </div>
            </div>
            <div class="description">
                <div class="ng-binding">
                    <font>故障次数</font>
                </div>
                <div class="description-stats ng-binding">
                    <font><span class="span-text">10</span>次</font>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6 panel-ls" style="margin-top:20px;">
        <div class="panel-count-sx">
            <div class="panel-heading clearfix">
                <h3 class="panel-title">
                    <font>订单统计</font>
                </h3>
            </div>
            <div class="panel-body">
                <div class="Chart-Order" style="position:relative;">
                    <div class="Chart-Order" id="chart-center">
                    </div>
                    <div class="Chart-Order order-lable">
                        <p class="lable-Count">
                            <span style="">总订单数量</span><br />
                            <span style="font-weight:bold;">2000</span>
                        </p>
                    </div>
                </div>
                <div class="channels-info">
                    <div>
                        <div class="channels-info-item ng-scope">
                            <div class="legend-color" style="background-color: #10c4b5"></div>
                            <p class="ng-binding">
                                <font>待执行订单</font>
                                <span class="channel-number ng-binding"><font>+ 87%</font></span>
                            </p>
                            <div class="progress   channel-progress">
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                        <div class="channels-info-item ng-scope">
                            <div class="legend-color" style="background-color: #005562"></div>
                            <p class="ng-binding">
                                <font>执行中订单</font>
                                <span class="channel-number ng-binding"><font>+ 87%</font></span>
                            </p>
                            <div class="progress   channel-progress">
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                        <div class="channels-info-item ng-scope">
                            <div class="legend-color" style="background-color: #0e8174"></div>
                            <p class="ng-binding">
                                <font>已完成订单</font>
                                <span class="channel-number ng-binding"><font>+ 87%</font></span>
                            </p>
                            <div class="progress   channel-progress">
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                        <div class="channels-info-item ng-scope">
                            <div class="legend-color" style="background-color: #6eba8c"></div>
                            <p class="ng-binding">
                                <font>已取消订单</font>
                                <span class="channel-number ng-binding"><font>+ 87%</font></span>
                            </p>
                            <div class="progress   channel-progress">
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6 panel-ls" style="margin-top:20px;">
        <div class="panel-count-sx">
            <div class="panel-heading clearfix">
                <h3 class="panel-title">
                    <font>异常报警</font>
                </h3>
            </div>
            <div class="panel-body">
                <div class="task-todo-container">
                    <ul class="todo-list ng-pristine ng-untouched ng-valid ng-isolate-scope ui-sortable ng-not-empty">
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障!!!</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                        <li class="ng-scope ui-sortable-handle">
                            <div class="blur-container">
                                <div class="blur-box"></div>
                            </div>
                            <i class="mark"></i>
                            <label class="todo-checkbox custom-checkbox custom-input-success">
                                <span class="cut-with-dots ng-binding">
                                    <font>穿梭车行走定位传感器故障</font>
                                </span>
                                <span class="cut-with-dots ng-binding ng-time">
                                    <font>2019-11-28 11:28:36</font>
                                </span>
                            </label>
                            <i class="remove-todo ion-ios-close-empty">
                            </i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row row-bottom">
    <div class="col-xl panel-ls">
        <div class="panel-count-sx" id="chart-bottom" style="padding:8px;"></div>
    </div>
</div>